<template>
  <div>
    <!-- 顶部 -->
    <el-card>
      <el-row>
        <el-col :span="7" class="top_input">
          <label>申请单号：</label>
          <el-input
            v-model="searchModel.applicationNumber"
            clearable
            placeholder="请输入单号"
          >
          </el-input>
        </el-col>
      </el-row>

      <div style="margin-left: 5px">
        <el-button type="primary" plain size="small" @click="getDispatchList()"
          >搜索</el-button
        >
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          申请表单
          <el-table
            ref="applicationsTable"
            :data="applicationsList"
            highlight-current-row
            @current-change="handleCurrentChangeapplications"
            style="width: 100%"
            height="300"
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
              property="applicationNumber"
              label="申请单号"
              width="200"
            >
            </el-table-column>
            <el-table-column property="passengers" label="乘车人数" width="120">
            </el-table-column>
            <el-table-column label="路径" width="200">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.departureLocation }}
                  <div></div>
                  {{ scope.row.destination }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="是否需要司机" width="120">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.needDriver == 1"
                  type="success"
                  effect="dark"
                  >需要</el-tag
                >
                <el-tag v-else type="danger" effect="dark">不需要</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="用车时间">
              <template slot-scope="scope">
                {{ scope.row.startTime.replace("T", " ") }}
                <div></div>
                {{ scope.row.endTime.replace("T", " ") }}
              </template>
            </el-table-column>
          </el-table>

          
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="searchModel.pageNo"
          :page-size="searchModel.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="applicationsTotal"
        >
        </el-pagination>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-card>
            可用车辆
            <el-table
              ref="carTable"
              :data="carInfoList"
              highlight-current-row
              @current-change="handleCurrentChangeCar"
              style="width: 100%"
              height="300"
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                property="plateNumber"
                label="车牌号"
                width="160"
              >
              </el-table-column>
              <el-table-column property="seatCount" label="座位数" width="120">
              </el-table-column>
              <el-table-column property="model" label="车辆品牌/车型" width="200">
              </el-table-column>
              <el-table-column label="是否分配司机">
                <template slot-scope="scope">
                  <el-tag
                    v-if="scope.row.assignedDriverId != null && scope.row.assignedDriverId.length > 0"
                    type="success"
                    effect="dark"
                    >已分配</el-tag
                  >
                  <el-tag v-else type="danger" effect="dark">未分配</el-tag>
                </template>
              </el-table-column>
              </el-table-column>
            </el-table>
          </el-card>
        </el-row>
      </el-col>
    </el-row>

    <el-card>
      <el-button @click="dispatch()">确定分配</el-button>
      <el-button @click="intelligentSelection()">智能选择</el-button>
    </el-card>
  </div>
</template>

<style>
.top_input {
  margin: 4px;
}
</style>

<script>
import applicationsApi from "@/api/applications";
export default {
  data() {
    return {
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },

      applicationsList: [],
      applicationsTotal: 0,
      carInfoList: [],
      carTotal: 0,

      // 选择的车辆
      carSelect: {},
      // 选择的申请订单
      applicationSelect: {},
    };
  },
  methods: {
    getDispatchList() {
      applicationsApi.getDispatchInfo(this.searchModel).then((res) => {
        this.applicationsList = res.data.applications;
        this.applicationsTotal = res.data.applicationsTotal;
        this.carInfoList = res.data.carInfos;
        this.carTotal = res.data.carInfosTotal;
      });
    },

  
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getDispatchList();
    },

    // 选择申请
    handleCurrentChangeapplications(val) {
      this.applicationSelect = val;
    },
    handleCurrentChangeCar(val) {
      this.carSelect = val;
    },

    dispatch() {
      if (!this.applicationSelect || !this.carSelect) {
        this.$message.error("请选择申请单和车辆");
        return;
      }
      const dispatchDto = {
        applications: this.applicationSelect,
        carInfo: this.carSelect,
      };
      applicationsApi.dispatch(dispatchDto).then((res) => {
        this.$message.success(res.message);
        this.getDispatchList();
      });
    },

    
    assignInOrder(apps, cars) {
      for (const app of apps) {
        const car = cars.find(v =>
          v.seatCount >= app.passengers && (
            !app.needDriver               // 不需要司机 => 任意车
            || (v.assignedDriverId && v.assignedDriverId.length > 0) // 需要司机 => 已分配司机
          )
        );
        if (car) return { application: app, vehicle: car };
      }
      return null;
    },


    //  智能选择
    intelligentSelection(){

      const dispatchDto = this.assignInOrder(this.applicationsList, this.carInfoList)
      if (dispatchDto) {
        this.$refs.applicationsTable.setCurrentRow(dispatchDto['application']);
        this.$refs.carTable.setCurrentRow(dispatchDto['vehicle']);
        console.log(dispatchDto)

      } else {
        this.$message.error("没有合适的车辆");
      }
    }
  },


  created() {
    this.getDispatchList();
  },
};
</script>
